<template>
	<view class="yg-gl">
		<!-- search组件的开始 -->
		<Search></Search>
		<!-- search组件的结束 -->
		<!-- tabs组件的开始 -->
		<!-- a.2 通过 tabs 属性将 选项值 传给 tabs组件 -->
		<!-- a.2.1 通过 自定义事件 实现子传父过程  -->
		<Tabs :tabs="tabs" @mytab="handleTabClick"></Tabs>
		<!-- tabs组件的结束 -->
		<!-- 商品列表的开始 -->
		<scroll-view scroll-y="true" class="yg-gl-pl" refresher-enabled="true" :refresher-triggered="triggered"
			@refresherrefresh="onRefresh" @refresherrestore="onRestore" @scrolltolower="handleReachBottom">
			<GoodList :goods="goodList"></GoodList>
		</scroll-view>
		<!-- 商品列表的结束 -->
	</view>
</template>

<script>
	import Search from '@/components/Search.vue'
	import Tabs from '@/components/Tabs.vue'
	import GoodList from '@/components/GoodList.vue'
	export default {
		components: {
			Search,
			Tabs,
			GoodList
		},
		data() {
			return {
				// 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
				triggered: true,
				/* a.1 定义一个tabs 数据 */
				tabs: [{
					id: 1,
					text: "综合",
					isActive: true // false
				}, {
					id: 2,
					text: "销量",
					isActive: false // true
				}, {
					id: 3,
					text: "价格",
					isActive: false // false
				}],
				pagesize: 20,
				pagenum: 1,
				total: 0,
				cid: '',
				query: '',
				goodList: []
			};
		},
		onLoad(obj) {
			// console.log(obj)
			this.getGoodList(obj)
		},
		methods: {
			// 列表触底时逻辑
			// https://uniapp.dcloud.io/component/scroll-view
			handleReachBottom: async function() {
				console.log("触底啦")
				let totalPage = Math.ceil(this.total / this.pagesize)
				let currentPage = this.pagenum + 1
				if (currentPage <= totalPage) {
					let params = {}
					if (this.cid) {
						params.cid = this.cid
					}
					if (this.query) {
						params.query = this.query
					}
					params.pagenum = currentPage
					params.pagesize = this.pagesize
					const res = await this.$request({
						url: 'goods/search',
						data: params
					})
					console.log(res)
					this.goodList = [...this.goodList,...res.message.goods]
					this.total = res.message.total
					this.pagenum = parseInt(res.message.pagenum)
				} else {
					uni.showToast({
						title: "已经是最后一页了",
						icon: "none"
					})
				}
			},
			// 下拉刷新的逻辑
			async onRefresh() {
				// console.log("正在刷新中。。。");
				if (this._freshing) return;
				this._freshing = true;
				// 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
				this.triggered = true;
				this.getGoodList({
					cat_id: this.cid,
					query: this.query
				})
				// 等界面更新完了之后，再去设置 取消 scroll-view 下拉效果
				this.$nextTick(function() {
					this.triggered = false;
					this._freshing = false;
				})

			},
			onRestore: function() {
				this.triggered = false; // 需要重置
			},

			// 接收子组件传过来的tabs
			handleTabClick: function(tabs) {
				this.tabs = tabs
			},
			// 获取商品列表
			getGoodList: async function(obj) {
				// console.log(obj)
				// 定义变量存放请求参数
				let params = {}
				if (obj.cat_id) {
					params.cid = obj.cat_id
					this.cid = obj.cat_id
				}
				if (obj.query) {
					params.query = obj.query
					this.query = obj.query
				}
				params.pagenum = this.pagenum
				params.pagesize = this.pagesize
				const res = await this.$request({
					url: 'goods/search',
					data: params
				})
				// console.log(res)
				this.goodList = res.message.goods
				this.total = res.message.total
				this.pagenum = parseInt(res.message.pagenum)
			}
		}
	}
</script>

<style lang="scss">
	.yg-gl {
		.yg-gl-pl {
			height: calc(100vh - 188rpx);
		}
	}
</style>
